<template>
  <div id="">
  <h2 id="header">分类</h2>
        
        
       
      
      <!-- 分类主体 -->
      <van-sidebar v-model="activeKey" id="fenlei">
        <van-sidebar-item v-for="(item,i) in menuArr"  @click="activeMenu(item.key)" :key='i' class="every" :title="item.value"/>
      </van-sidebar>
      <div id="item" >
          <div v-for="(abc,i) in list" :key="i">
            <img :src="abc.pimg" alt="">
          <p>{{abc.pname}}</p>
          </div>
        <div>

        </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        activeKey: 0,
        title:'分类',
        menuArr:[
          {key:'女装',value:'女装'},
          {key:'男装',value:'男装'},
          {key:'美食',value:'美食'},
          {key:'美妆',value:'美妆'},
          {key:'居家日用',value:'居家日用'},
          {key:'鞋品',value:'鞋品'},
          {key:'数码家电',value:'数码家电'},
          {key:'内衣',value:'内衣'},
          {key:'文娱车品',value:'文娱车品'},
          {key:'母婴',value:'母婴'},
          {key:'箱包',value:'箱包'},
          {key:'配饰',value:'配饰'},
          {key:'配饰',value:'配饰'},
          {key:'家装家纺',value:'户外运动'}
        ],
        list:[]
    }
  },
  mounted(){

  },
  methods: {
    activeMenu(){
      // console.log(a)
      // this.list=a
      this.$api.getShopp({uid:88990}).then((res)=>{
        console.log(res)
        this.list=res.data
      })

    }
  },
  components: {

  }
}
</script>

<style scoped lang="scss">
    *{
        margin:0;
        padding: 0
    }
    #header{
        text-align: center;
        height:50px;
        background: pink;
        color:white;
        line-height: 50px;
        text-align: center;
        position: fixed;
        top:0;
        z-index: 1;
        width:100%
    }
    #fenlei{
        width:100px;
        margin-top:50px;
        margin-bottom:50px;
        float: left;
    }
    .every{
        width:100px;
        height:35px ;
        line-height: 35px;
        text-align: center
    }
  #item{
    height:490px;
    width:250px;
    background: red;
    float: right;
    margin-top:60px
    
  }
  #item img{
    width:100px
  }
</style>
